<template>
	<view class="category">
		<search></search>
		<view class="connent">
			<view class="left">
				<view class="item" :class="{active:currentIndex === index}" v-for="(item,index) in tabs" :key="index" @click="change(index)">
					{{item.cat_name}}
				</view>
			</view>
			<scroll-view :scroll-top="srcollTop" scroll-y="true" @scroll="myScroll" class="right">
				<image class='topimg' src="../../static/titleImage.png" mode=""></image>
				<view class="item">
					<block v-for="(item,index) in secondLevel" :key="index">
						<view class="title">
							<text>/</text>{{item.cat_name}}<text>/</text>
						</view>
						<view class="buttom">
							<view class="items" @click="tosearch(childrenitem.cat_name)" v-for="(childrenitem,childrenindex) in item.children"
							 :key='childrenindex'>
								<image :src="childrenitem.cat_icon" mode=""></image>
								<text>{{childrenitem.cat_name}}</text>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	import {
		categories
	} from '../../api/category.js'
	export default {
		data() {
			return {
				// 当前选中的元素的下标
				currentIndex: 0,
				tabs: '', // 导航区
				secondLevel: '', // 二级导航栏
				srcollTop: 0,//滚动条距离
				ssss:0,// 获取滚动条距离
			}
		},
		watch: {
			currentIndex() {
				// 侦听索引是否发生变化  , 发生就重新赋值	
				this.secondLevel = this.tabs[this.currentIndex].children
			}
		},
		async onLoad() {
			const res = await categories() // 发送网络请求
			this.tabs = res.data.message // 赋值
			this.secondLevel = res.data.message[this.currentIndex].children // 二级栏赋值
		},
		methods: {
myScroll(e){
	this.ssss = e.detail.scrollTop
},

			change(index) {
				// 重新赋值
				this.srcollTop = this.ssss
				this.$nextTick(function() {
					this.srcollTop = 0
				})
				this.currentIndex = index
			},
			// 带关键字调转到搜索页面
			tosearch(key) {
				console.log(key)
				uni.navigateTo({
					url: `../search/search?key=${key}` //跳转路由到
				})
			}
		}
	}
</script>

<style lang="less">
	.category {
		.connent {
			display: flex;
			position: fixed;
			top: 100rpx;
			bottom: 0;
			right: 0;
			left: 0;


			.left {
				width: 200rpx;
				text-align: center;
				overflow: auto;
				background-color: #f4f4f4;

				&::-webkit-scrollbar {
					display: none;
				}

				.item {
					line-height: 100rpx;

					&.active {
						font-weight: 600;
						color: #eb4450;
						background-color: #fff;
						position: relative;

						&::before {
							content: '';
							width: 8rpx;
							height: 60rpx;
							background-color: #eb4450;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.right {
				padding: 20rpx 16rpx;
				flex: 1;
				line-height: 60rpx;
				overflow: auto;

				&::-webkit-scrollbar {
					display: none;
				}

				.topimg {
					width: 100%;
					height: 180rpx;
				}

				.item {
					box-sizing: border-box;

					.title {
						line-height: 110rpx;
						text-align: center;

						text {
							margin: 0 30rpx;
							color: #C8C7CC;
						}
					}

					.buttom {
						display: flex;
						flex-wrap: wrap;
						text-align: center;
						box-sizing: border-box;

						.items {
							width: 33.3%;

							image {
								width: 120rpx;
								height: 120rpx;
							}

							text {
								display: block;
								font-size: 12px;
							}

						}
					}
				}
			}
		}
	}
</style>
